@extends('admin/layout')
@section('content')

        <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        

        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                分类管理
                <small>列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
                <li><a href="#">分类管理</a></li>
                <li class="active">列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">快速查看分类列表</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body">

                            @if(session('info'))
                            <div  id = 'showhidden' class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4>    <i class="icon fa fa-check"></i>提示!</h4>
                                    {{ session('info') }}
                             </div>
                             @endif
                             <script type="text/javascript">

                                 window.onload=function(){
                                    $('#showhidden').hide(3000);
                                 }

                             </script>

                           
                        
                            <div style = 'height:20px;'></div>       
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>分类名</th>
                                    <th>父类名称</th>
                                   
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                 @foreach($data as $cate)
                                <tr>

                                    <td class = 'uu'>{{ $cate -> id }}</td>
                                    <td name = 'name'>{{ $cate -> name }}</td>
                                    <td>{{ $cate -> pname }}</td>
                                    
                                    <td class = 'qq'><a>
                                        @if( $cate -> status =='0')
                                            启用
                                        @else
                                            禁用
                                        @endif                                    
                                    </a></td>
                                    <td><a href = "{{ url('/admin/cates/edit') }}/{{$cate -> id}}">编辑</a> <a href = "{{ url('/admin/cates/delete') }}/{{$cate -> id}}">删除</a></td>
                                </tr>
                               @endforeach
                                </tbody>
                               
                            </table>
                            
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->

                   
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    
    <!-- 状态改变的ajax的判断 -->
    <script type="text/javascript">
        window.onload = function(){
           $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
            });

           $('.qq').on('click',function(){
                var status = $(this);
                // var id = $(this).parent().children().first().html();
                var id = $(this).parent().find('.uu').html();
                
                $.post('/admin/cates/ajaxupdate',{id:id},function(data){
                    
                    if(data == '0')
                    {
                        status.html('<a>禁用</a>');
                    }else if(data=='2')
                    {
                        status.html('<a>启用</a>');
                    }
                },'json')
            });
            $('.qq').on('mouseover',function(){
                this.style.cursor = 'pointer';
            }) 

            function dblClick()
            {
                var td = $(this);
                var inp = $('<input type = text"/>');
                var name = td.html();
                var id = td.prev().html();
                var name = td.html();
                inp.val(name);
                //将表单放到td中
                $(this).html(inp);
                inp.select();
                //失去焦点事件
                inp.blur(function(){
                    var newName = $(this).val();
                   $.post('/admin/user/ajaxUsername',{id:id,name:newName},function(data){
                        if(data == 1)
                        {
                            td.html(name);
                            alert('用户名已经存在');

                        }else if(data == 2)
                        {
                            td.html(name);
                            alert('修改失败');
                        }else
                        {
                            td.html(newName);
                            
                        }


                   },'json')
                   //添加事件
                   td.dblclick(dblClick);
                   
                });
                td.unbind('dblclick');
                
            }
            //点击用户名快速修改
            $('td[name = name]').dblclick(dblClick);


        }   

       

    </script>
   

@endsection